import React from "react";
import { useEffect } from "react";
import "./index.scss";
import * as  echarts from 'echarts'
const Statistics = () =>{
    useEffect(()=>{
        const chartDom = document.getElementById('main1');
        const myChart = echarts.init(chartDom);
        let option;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['人数', '百分比'],
                    top: 25,
                    left: 50,
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['步行', '自行车', '电动车', '摩托车','私家车', '公交车', '地铁' ],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '人数',
                    min: 0,
                    max: 50,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                {
                    type: 'value',
                    name: '百分比',
                    min: 0,
                    max: 30,
                    interval: 12,
                    axisLabel: {
                        formatter: '{value} %'
                    }
                }
            ],
            grid: {
                bottom: 60,
                top: 80,
                right: 80,
                left: 80,
            },
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '人';
                        }
                    },
                    data: [
                        5, 15, 20, 13, 40, 27, 20,
                    ]
                },
                {
                    name: '百分比',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' %';
                        }
                    },
                    data: [3,10,14,9,28,19,14]
                }
            ]
        };

        option && myChart.setOption(option);
    }, [])
    useEffect(()=>{
        const chartDom = document.getElementById('main2');
        const myChart = echarts.init(chartDom);
        let option2;
        option2 = {
            title: {
                text: '通勤距离统计',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '通勤距离',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 12, name: '<5km' },
                        { value: 19, name: '5km-10km' },
                        { value: 45, name: '10km-20km' },
                        { value: 13, name: '25km-30km' },
                        { value: 5, name: '>30km' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option2 && myChart.setOption(option2);
    }, [])
    useEffect(()=>{
        const chartDom = document.getElementById('main3');
        const myChart = echarts.init(chartDom);
        let option;

        option = {
            title: {
                text: '通勤平均时间统计'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['人数'],
                top: 20,
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: [
                        0, 5, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
                        95, 100, 105, 110, 115, 120
                    ]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '人数',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [
                        , 0, 15, 18, 21, 24, 27, 30, 32, 34, 36, 37, 38, 37, 35, 32, 29, 21, 12, 5, 0
                    ]
                }
            ]
        };

        option && myChart.setOption(option);
    }, [])
    return <div>
        <div className="head">用户数据统计</div>
        <div className="color"></div>
        <div className="body">
            <div className="box">
                <section className="Title">
                    <div className="title">通勤方式</div>
                    <div className="title">通勤距离</div>
                    <div className="title">通勤时间</div>
                </section>
                <section className="list">
                    <div id="main1" className="main"></div>
                    <div id="main2" className="main"></div>
                    <div id="main3" className="main"></div>
                </section>
            </div>
        </div>
    </div>
};
export default Statistics
